import styles from './LoginNew.less';
import { Component } from 'react';
import { connect } from 'dva';

import logo from '../../assets/imags/logo_icon.png';
import logotitle from '../../assets/imags/title.png';
import shadow from '../../assets/imags/shadows.png';
import user from '../../assets/imags/user_icon.png';
import password from '../../assets/imags/mima_icon.png';
import triangle from '../../assets/imags/triangle.png';

import { Row, Col, Form, List, Alert, Icon, Input, Button, Checkbox, Divider } from 'antd';

const FormItem = Form.Item;

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
@Form.create()
export default class LoginNew extends Component {
  // 登录操作
  handleSubmit = e => {
    const { dispatch } = this.props;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        dispatch({
          type: 'login/login',
          payload: { ...values, type: 'account' },
        });
      }
    });
  };

  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/getCmsData',
    });
  }

  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  render() {
    const { cmsData } = this.props.login;
    const { getFieldDecorator } = this.props.form;
    const { login, submitting } = this.props;
    return (
      <div className={styles.container}>
        <Row className={styles.orgTitle}>
          <img alt="systitle" src={logotitle} />
        </Row>
        <Row className={styles.centerStyle}>
          <Col span={6} offset={4} className={styles.colInner}>
            <div className={styles.loginformbox}>
              <img alt="systitle" src={logo} className={styles.syslog} />
              <Form onSubmit={this.handleSubmit}>
                <FormItem>
                  {getFieldDecorator('userName', {
                    rules: [{ required: true, message: '请输入用户名!' }],
                  })(
                    <Input
                      className={styles.formItem}
                      prefix={<img src={user} className={styles.formItemIcon} />}
                      placeholder="用户名"
                    />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入密码!' }],
                  })(
                    <Input
                      className={styles.formItem}
                      prefix={<img src={password} className={styles.formItemIcon} />}
                      type="password"
                      placeholder="密码"
                    />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: false,
                  })(<Checkbox className={styles.formChkItem}>记住密码</Checkbox>)}
                </FormItem>
                <FormItem>
                  <Button
                    loading={submitting}
                    type="primary"
                    htmlType="submit"
                    className={styles.loginformbutton}
                  >
                    登录
                  </Button>
                </FormItem>
                {login.status === 'error' &&
                  login.type === 'account' &&
                  !submitting &&
                  this.renderMessage('账户或密码错误!')}
              </Form>
            </div>
            <img alt="shadow" src={shadow} />
          </Col>
          <Col span={8} offset={2}>
            <div className={styles.cmsbox}>
              <List
                className={styles.listStyle}
                //loading={loading}
                itemLayout="horizontal"
                //loadMore={loadMore}
                dataSource={cmsData}
                split={false}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={<img alt="triangle" src={triangle} className={styles.listItemLogo} />}
                      title={
                        <a className={styles.listItemTitle} href={item.url}>
                          {item.title}
                        </a>
                      }
                      description={<span className={styles.listItemContent}>{item.content}</span>}
                    />
                  </List.Item>
                )}
              />
            </div>
            <img alt="shadow" src={shadow} />
          </Col>
        </Row>
      </div>
    );
  }
}
